<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>批次保质期清单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 搜索区域 -->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" size="small">
          <el-form-item label="仓库">
            <el-input
              v-model="input"
              readonly
              placeholder="选择仓库"
              @click="warehouseVisible = true"
              style="width: 180px"
            />
          </el-form-item>

          <el-form-item label="商品类别">
            <el-select
              v-model="searchForm.category"
              placeholder="请选择商品类别"
              clearable
              filterable
              style="width: 140px"
            >
              <el-option
                v-for="cat in uniqueCategories"
                :key="cat"
                :label="cat"
                :value="cat"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品">
            <el-select
              v-model="searchForm.productName"
              placeholder="请选择商品"
              clearable
              filterable
              style="width: 150px"
            >
              <el-option
                v-for="name in uniqueProductNames"
                :key="name"
                :label="name"
                :value="name"
              />
            </el-select> </el-form-item
          ><br />

          <el-form-item label="批次">
            <el-select
              v-model="searchForm.batch"
              placeholder="请选择批次"
              clearable
              filterable
              style="width: 150px"
            >
              <el-option
                v-for="b in uniqueBatches"
                :key="b"
                :label="b"
                :value="b"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 分割线 -->
        <el-divider style="margin: 10px 0" />
      </div>

      <!-- 仓库搜索列表弹出对话框 -->
      <el-dialog
        v-model="warehouseVisible"
        title="仓库搜索列表"
        width="40%"
        style="height: auto;"
        draggable
        :show-close="true">
        <!-- 调用仓库的搜索组件 -->
        <WareHouse ref="warehouseRef" :info="{selection: true, no: false, name: true, code: true, status: false, op: false, outButton: true}"/>
        <br/><br/>
      </el-dialog>

      <!-- 导出按钮 -->
      <div class="table-header-buttons">
        <el-button size="small" type="primary" @click="handleExport"
          >导出</el-button
        >
      </div>
      <br />
      <!-- 表格容器 -->
      <el-table
        :data="displayData"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
        style="width: 100%"
        :max-height="600"
        v-loading="loading"
      >
        <el-table-column
          prop="productCode"
          label="商品编号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="productName"
          label="商品名称"
          width="150"
          align="center"
        />
        <el-table-column
          prop="category"
          label="商品类别"
          width="120"
          align="center"
        />
        <el-table-column prop="brand" label="品牌" width="100" align="center" />
        <el-table-column
          prop="specification"
          label="规格型号"
          width="120"
          align="center"
        />
        <el-table-column prop="unit" label="单位" width="80" align="center" />
        <el-table-column
          prop="subUnit"
          label="副单位"
          width="80"
          align="center"
        />
        <el-table-column
          prop="warehouse"
          label="仓库"
          width="100"
          align="center"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          width="80"
          align="center"
        />
        <el-table-column
          prop="subQuantity"
          label="副单位数"
          width="100"
          align="center"
        />
        <el-table-column prop="batch" label="批次" width="120" align="center" />
        <el-table-column
          prop="productionDate"
          label="生产日期"
          width="120"
          align="center"
        />
        <el-table-column
          prop="shelfLifeDays"
          label="保质期天数"
          width="120"
          align="center"
        />
        <el-table-column
          prop="expiryDate"
          label="有效期至"
          width="120"
          align="center"
        />
        <el-table-column
          prop="remainingDays"
          label="剩余天数"
          width="100"
          align="center"
        />
        <el-table-column
          prop="remark"
          label="商品备注"
          width="150"
          align="center"
        />
      </el-table><br/>

      <!-- 分页 -->
      <div class="page-div">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="10"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import WareHouse from "@/views/basic/WareHouse.vue";
//仓库搜索选中结果
let warehouseVisible = ref(false);
let input = ref("");
let warehouseRef = ref();
watch(warehouseVisible, (newVisible) => {
  if (!newVisible) {
    if (warehouseRef.value) {
      //这里需要加上if判断，子组件中没有选择数据时为undefined，可能用于点击仓库，但是没选择，所以导致undefined报错
      input.value = warehouseRef.value.selectedArray
        .map((item) => item.name)
        .join(",");
      //获取到仓库编码，存数据库用，仓库name仅用作展示
      //用完之后清空，避免污染其他地方数据
      warehouseRef.value.clearSelected();
    }
  }
});
// 模拟数据：批次库存明细
const rawData = ref([
  {
    productCode: "572",
    productName: "测试瓷砖",
    category: "瓷砖",
    brand: "",
    specification: "白色",
    unit: "块",
    subUnit: "",
    warehouse: "冷藏库",
    quantity: 40,
    subQuantity: 0,
    batch: "20251022",
    productionDate: "2025-10-23",
    shelfLifeDays: 9999,
    expiryDate: "2053-03-09",
    remainingDays: 9998,
    remark: "",
  },
  {
    productCode: "572",
    productName: "测试瓷砖",
    category: "瓷砖",
    brand: "",
    specification: "白色",
    unit: "块",
    subUnit: "",
    warehouse: "冷藏库",
    quantity: 60,
    subQuantity: 0,
    batch: "20251023001",
    productionDate: "2025-10-23",
    shelfLifeDays: 9999,
    expiryDate: "2053-03-09",
    remainingDays: 9998,
    remark: "",
  },
  {
    productCode: "572",
    productName: "测试瓷砖",
    category: "瓷砖",
    brand: "",
    specification: "白色",
    unit: "块",
    subUnit: "",
    warehouse: "默认仓库",
    quantity: 100,
    subQuantity: 0,
    batch: "20251023001",
    productionDate: "2025-10-23",
    shelfLifeDays: 9999,
    expiryDate: "2053-03-09",
    remainingDays: 9998,
    remark: "",
  },
  {
    productCode: "SP0224",
    productName: "88888",
    category: "",
    brand: "",
    specification: "",
    unit: "袋",
    subUnit: "",
    warehouse: "食品库",
    quantity: 100,
    subQuantity: 0,
    batch: "20251023",
    productionDate: "2025-10-23",
    shelfLifeDays: 90,
    expiryDate: "2026-01-21",
    remainingDays: 89,
    remark: "",
  },
]);

// 搜索表单
const searchForm = reactive({
  warehouse: "",
  category: "",
  productName: "",
  batch: "",
});

// 计算唯一值选项
// const uniqueWarehouses = computed(() => [
//   ...new Set(rawData.value.map((i) => i.warehouse)),
// ]);
const uniqueCategories = computed(() => [
  ...new Set(rawData.value.map((i) => i.category)),
]);
const uniqueProductNames = computed(() => [
  ...new Set(rawData.value.map((i) => i.productName)),
]);
const uniqueBatches = computed(() => [
  ...new Set(rawData.value.map((i) => i.batch)),
]);

// 过滤后的数据显示
const displayData = computed(() => {
  return rawData.value.filter((item) => {
    const matchesWarehouse =
      !searchForm.warehouse || item.warehouse === searchForm.warehouse;
    const matchesCategory =
      !searchForm.category || item.category === searchForm.category;
    const matchesProductName =
      !searchForm.productName || item.productName === searchForm.productName;
    const matchesBatch = !searchForm.batch || item.batch === searchForm.batch;

    return (
      matchesWarehouse && matchesCategory && matchesProductName && matchesBatch
    );
  });
});

// 加载状态
const loading = ref(false);

// 查询与重置
const handleQuery = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};

const resetSearch = () => {
  searchForm.warehouse = "";
  searchForm.category = "";
  searchForm.productName = "";
  searchForm.batch = "";
};

// 导出功能
const handleExport = () => {
  alert("导出功能已触发，可在此实现 Excel 导出逻辑");
};
</script>

<style scoped>
/* .search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
} */

.table-header-buttons {
  margin-top: 10px;
  text-align: right;
}

::v-deep(.el-table tbody tr:hover > td) {
  background-color: #edd4587d !important;
  border-bottom-color: #c78e39;
}

::v-deep(.el-table .el-table__body td) {
  padding: 8px 0;
  height: 55px;
}

::v-deep(.el-table .el-table__header th) {
  padding: 10px 0;
  height: 44px;
  background-color: #f5f7fa;
}


</style>